<template>
	<view style="padding-bottom:50rpx;">
		<!-- <page-head :title="'订单详情'" :headtype="2"></page-head> -->
		<view class="goodsl" style="padding-top: 20rpx;">
			<view class="goodsitem marginAuto">
				<view class="gdtop flex">
					<view class="gdtopl flex">
						<view class="gdtoplheadimg">
							<image v-if="!datas.user_avatar" src="@/static/logo.png" mode=""></image>
							<image v-if="datas.user_avatar" :src="apifun.URLimg+datas.user_avatar" mode=""></image>
						</view>
						<view class="gdtoplname">{{ datas.username }}</view>
						<view class="gdtoplphone">{{ datas.user_mobile }}</view>
					</view>
					<view class="gdtopr" v-if="datas.pay_status == 1">待支付</view>
					<view class="gdtopr" v-if="datas.pay_status == 2">待接单</view>
					<view class="gdtopr" v-if="datas.pay_status == 3">教学中</view>
					<view class="gdtopr" v-if="datas.pay_status == 4">已完成</view>
					<view class="gdtopr" v-if="datas.pay_status == 5">已取消</view>
					<view class="gdtopr" v-if="datas.pay_status == 6">待分配</view>
				</view>
				<view class="gdtimeb flex">
					<view class="gdtimebl flex">
						<view class="gdtimebltitle mainBg baiColor">订单时间<view class="gdtimebld"></view></view>
						<view class="gdtimebltime mainColor">{{ datas.create_time }}</view>
					</view>
					<view class="gdtimebr mainColor">{{ datas.pay_type == 1 ? '微信':'先体验后付款' }}</view>
				</view>
				<view class="gdphase flex">
					<view class="gdphaseeach flex">
						<uv-icon name="play-right-fill" color="#1177F4" size="10"></uv-icon>
						<text>完成阶段</text>
						<text class="mainColor">{{ datas.progress }}/5</text>
					</view>
					<view class="gdphaseeach flex">
						<uv-icon name="play-right-fill" color="#1177F4" size="10"></uv-icon>
						<text>待结算</text>
						<text class="mainColor">￥{{ datas.coach_amount }}</text>
					</view>
					<view class="gdphaseeach flex">
						<uv-icon name="play-right-fill" color="#1177F4" size="10"></uv-icon>
						<text>总金额</text>
						<text class="mainColor">￥{{ datas.amount }}</text>
					</view>
				</view>
				<view class="gdpr flex">
					<view class="gdprq" style="margin-top:15rpx;"></view>
					<view class="gdprtxt">项目：小车/C1 | 小车手动挡C1二人一车券周班 |</view>
				</view>
				<view class="gdpr flex">
					<view class="gdprq" style="margin-top:17rpx;"></view>
					<view class="gdprtxt">备注：{{ datas.remark }}</view>
				</view>
				<view class="gdpr flex">
					<view class="gdprq" style="margin-top:17rpx;"></view>
					<view class="gdprtxt">订单编号：{{ datas.order_sn }}</view>
				</view>
			</view>
		</view>
		<view class="procedure flex marginAuto">
			<view class="procedurese" :class="datas.progress >= 1 ? 'mainBg':'' "></view>
			<view class="proceduremsg">
				<view class="procedurem-title">开班</view>
				<view class="procedurem-txt">{{ datas.assign_time }}双方确认完成</view>
			</view>
		</view>
		<view class="procedure flex marginAuto">
			<view class="procedurese" :class="datas.progress >= 2 ? 'mainBg':'' "></view>
			<view class="proceduremsg">
				<view class="procedurem-title">科目一({{ datas.score1 }})</view>
				<view class="procedurem-txt" style="color:#DC362E;" v-if="datas.progress == 2">待教练确认此阶段是否完成</view>
				<view class="procedurem-txt" v-if="datas.progress > 2">{{ datas.score1_time }}  双方确认完成</view>
			</view>
		</view>
		<view class="procedure flex marginAuto">
			<view class="procedurese" :class="datas.progress >= 3 ? 'mainBg':'' "></view>
			<view class="proceduremsg">
				<view class="procedurem-title">科目二({{ datas.score2 }})</view>
				<view class="procedurem-txt" style="color:#DC362E;" v-if="datas.progress == 3">待教练确认此阶段是否完成</view>
				<view class="procedurem-txt" v-if="datas.progress > 3">{{ datas.score2_time }}  双方确认完成</view>
			</view>
		</view>
		<view class="procedure flex marginAuto">
			<view class="procedurese" :class="datas.progress >=4 ? 'mainBg':'' "></view>
			<view class="proceduremsg">
				<view class="procedurem-title">科目三({{ datas.score3 }})</view>
				<view class="procedurem-txt" style="color:#DC362E;" v-if="datas.progress == 4">待教练确认此阶段是否完成</view>
				<view class="procedurem-txt" v-if="datas.progress > 4">{{ datas.score3_time }}  双方确认完成</view>
			</view>
		</view>
		<view class="procedure flex marginAuto">
			<view class="procedurese" :class="datas.progress >= 5 ? 'mainBg':'' "></view>
			<view class="proceduremsg">
				<view class="procedurem-title">拿证({{ datas.score4 }})</view>
				<view class="procedurem-txt" v-if="datas.progress >= 5">{{ datas.score4_time }}  双方确认完成</view>
			</view>
		</view>
		<view class="footerblock flex marginAuto" v-if="datas.pay_status == 3">
			<view class="ftl" @click="callphone()">
				<view class="marginAuto flex" style="width:40rpx;height:40rpx;">
					<uv-icon class="marginAuto" name="phone-fill" size="20" color="#3D3D3D"></uv-icon>
				</view>
				<view class="ftltxt">联系客户</view>
			</view>
			<view class="ftr mainBg baiColor" @click="completekmfun();grade=''">完成科目</view>
		</view>
		<!-- 弹窗 -->
		<uv-popup ref="completecj" bgColor="none" round="20">
			<view class="closetest">
				<image class="closetestbg" :src="apifun.serveimg+'closetestbg.png'" mode=""></image>
				<view class="closetesttitle" style="padding-top:40rpx;font-weight: 600;">学员成绩</view>
				<view class="completecjinput marginAuto">
					<input type="text" placeholder="请输入学员成绩" v-model="grade"/>
				</view>
				<view class="closetestbtn flex">
					<view class="closetestbtne mainColor" style="background: #ffffff;" @click="$refs.completecj.close()">取消</view>
					<view class="closetestbtne mainBg baiColor" @click="entercompletecjfun">确定</view>
				</view>
			</view>
		</uv-popup>
	</view>
</template>
<style scoped lang="scss"></style>
<script>
	export default {
		data() {
			return {
				apifun:this.apifun,
				id:'',
				datas:{},
				grade:''
			};
		}, 
		onLoad(option) {
			this.id = option.id;
			this.initData()
		},
		methods: {
			initData(){
				let sendData = {
					id:this.id
				};
				this.apifun.unirequest('/coach/order/getOrderDetail','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.datas = datas;
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			callphone(){
				uni.makePhoneCall({
					phoneNumber: this.datas.user_mobile //仅为示例
				});
			},
			entercompletecjfun(){  //  确人学生成绩
				let sendData = {
					score:this.grade,
					id:this.datas.id,
					progress:this.datas.progress
				};
				this.apifun.unirequest('/coach/order/confirmProgress','post',sendData,(res)=>{
					// console.log(res)
					if(res.code === 200){
						let datas = res.data;
						this.$refs.completecj.close();
						this.initData();
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			completekmfun(){
				this.$refs.completecj.open()
			}
		},
	};
</script>

<style scoped lang="scss">
	@import '../../public/alert.scss';
	// 列表
	.goodsitem{
		width: 650rpx;
		padding: 20rpx;
		background: #fff;
		border-radius: 20rpx;
		.gdtop{
			width: 100%;
			line-height: 52rpx;
			justify-content: space-between;
			.gdtopl{
				.gdtoplheadimg{
					width: 52rpx;
					height: 52rpx;
					image{
						width: 52rpx;
						height: 52rpx;
						border-radius: 100rpx;
					}
				}
				.gdtoplname,
				.gdtoplphone{
					font-size: 30rpx;
					color: #333333;
					margin-left: 20rpx;
				}
			}
			.gdtopr{
				font-size: 30rpx;
				color:#666666;
			}
		}
		.gdtimeb{
			margin-top: 20rpx;
			justify-content: space-between;
			.gdtimebl{
				border: 1px solid #0E71EB;
				height: 44rpx;
				line-height: 44rpx;
				border-radius: 6rpx;
				.gdtimebltitle{
					position: relative;
					font-size:28rpx;
					padding: 0 20rpx;
					.gdtimebld{
						position: absolute;
						top: 12rpx;
						right:-10rpx;
						width:16rpx;
						height: 16rpx;
						background: #fff;
						border-radius: 100rpx;
					}
				}
				.gdtimebltime{
					font-size:28rpx;
					padding: 0 20rpx;
				}
				
			}
			.gdtimebr{
				display: inline-block;
				border: 1px solid #0E71EB;
				font-size:28rpx;
				height: 44rpx;
				line-height: 44rpx;
				padding: 0 14rpx;
				border-radius: 6rpx;
			}
		}
		.gdphase{
			justify-content: space-between;
			margin-top: 20rpx;
			.gdphaseeach{
				font-size: 28rpx;
			}
		}
		.gdpr{
			margin-top:20rpx;
			.gdprq{
				display: inline-block;
				width: 16rpx;
				height: 16rpx;
				border: 1px solid #1177F4;
				border-radius: 50%;
			}
			.gdprtxt{
				margin-left: 10rpx;
				line-height: 50rpx;
				font-size: 28rpx;
				color: #333333;
			}
		}
	}
	.procedure{
		width: 690rpx;
		margin-top: 20rpx;
		.procedurese{
			width: 30rpx;
			height: 30rpx;
			border-radius: 100rpx;
			border: 1px solid #0E71EB;
			margin-top:55rpx;
		}
		.proceduremsg{
			flex: 1;
			margin-left: 20rpx;
			padding: 20rpx;
			border-radius: 20rpx;
			background:#fff;
			.procedurem-title{
				line-height: 50rpx;
				color: #333333;
				font-size: 30rpx;
			}
			.procedurem-txt{
				line-height: 50rpx;
				color: #666666;
				font-size: 24rpx;
			}
		}
	}
	// 底部功能
	.footerblock{
		padding: 20rpx 0;
		width: 690rpx;
		justify-content: space-between;
		.ftl{
			width: 100rpx;
			.ftltxt{
				font-size: 20rpx;
				color: #333333;
				text-align: center;
				line-height: 44rpx;
			}
		}
		.ftr{
			width: 80%;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			border-radius:10rpx;
			font-size:30rpx;
		}
	}
	// 弹窗
	.completecjinput{
		position: relative;
		z-index: 10;
		width:82%;
		height: 100rpx;
		padding: 0 4%;
		background: #ffffff;
		border-radius: 10rpx;
		margin-top: 40rpx;
		input{
			width: 100%;
			height: 100rpx;
			background: #fff;
		}
	}
</style>